@config.main("Blast") {

    <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("bootstrap-fileinput-5.2.1/css/fileinput.min.css")">
    <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("FormValidation/dist/css/formValidation.min.css")">
    <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("bootstrap-sweetalert-master/dist/sweetalert.css")">

    <div class="body-box">
        <div class="page-box">

            @config.subTitle("Blast")
            <div class="main-body">


                @components.navUlComponents(Seq(("blastn", "Blastn Gene", BlastForm("blastn", "Blastn Against Gene")),
                    ("blastnGenome", "Blastn Genome", BlastForm("blastnGenome", "Blastn Against Genome")),
                    ("blastp", "Blastp", BlastForm("blastp", "Blastp Against Protein")),
                ), "blastn")


                <div id="result" class="result">
                    <hr>
                    <h4 class="card-title" style="line-height: 30px;
                        float: left">Result:</h4>
                    <button type="button" class="btn my-btn" onclick="downloadExcel()" style="float: left;
                        margin-left: 15px;
                        margin-top: -5px;"><i class="fa fa-download"></i> Download
                    </button>
                    <iframe id="frame" style="width: 100%;
                        margin-left: -7px;" height="1000px" frameborder="0" align="middle">

                    </iframe>
                </div>

            </div>
        </div>
    </div>

    <script src="@routes.Assets.versioned("bootstrap-fileinput-5.2.1/js/fileinput.js")" type="text/javascript"></script>
    <script src="@routes.Assets.versioned("bootstrap-fileinput-5.2.1/js/locales/es.js")" type="text/javascript"></script>
    <script src="@routes.Assets.versioned("FormValidation/dist/js/formValidation.js")" type="text/javascript"></script>
    <script src="@routes.Assets.versioned("FormValidation/dist/js/framework/bootstrap.min.js")" type="text/javascript"></script>
    <script src="@routes.Assets.versioned("bootstrap-sweetalert-master/dist/sweetalert.min.js")" type="text/javascript"></script>
    <script src="@routes.Assets.versioned("blast/js/FileSaver.min.js")" type="text/javascript"></script>

    <script>
            $(function () {
                $("input:radio[name=method][value=text]").prop("checked", true);
                $("#input-1").fileinput();
                  formValidation();

            })

            function getExample(blast) {
                console.log(blast)
                let example = ""
                if (blast === "blastp") {
                    example = ">example1\n" +
                            "MFTAGQPLGYYGSWPLFTLVHHKMVLKHWEGGHFDRYVVLGDDIIIVDRRVAIQYKSLLEKLGVTISSQKSICSSIR\n" +
                            ">example2\n" +
                            "MFIINGVLDSTSTMLQPRIVGHYRIRLNDQWLTVAGGFTRIGNNDITILGNDAEISTDIVLQEAQQAHENAEANLSKVEGKRQAIEANLALRRARTRVEAINVIFN\n";
                } else {
                    example = ">example1\n" +
                            "ATGGAAGCAAACAAAGAGGAAGCACTTAAGGCAATTGAGAATGCCGAGAAGAGATTTTCTCAGAGAGATTTTGCAGGAGCGAAAAACTATGCTTTGAAGGCTAAAGAGCTTTGTCCTGAGTTGGAGGGTATATCTCAAATGGTGTCCACATTTGATGTTCATATTGCTTCTGAGTTCAGACATAATGGCGAAGTAGATTATTATTCGGTTCTCGGACTAAAACCTACTGCGGATAAAGAGGCTGTCAAAAGACAGTACAAGAAGTTGGCAGTGTTGCTTCATCCAGATAAGAACAAATGTATTGGAGCTGATGGTGCATTTAAGCTTGTTTCTGAGGCGTGGACTTGGCTCGACAATTCCATGCGTAGTTCTTACAATCTCAAGAGAAAATATTCTTCTTTTCATGCTCCAGGTTATAACAAATGTTCCAATTTGCCGGCCTCACGTAGTAAACTTGACACCTTTTGGACAATCTGTACCGCTTGTAAGGTCCAGTATGAATATCTGCGCAAGTATGTGAATAAAAAGCTCTCTTGCAAGAACTGTCGTGGCACTTTTGTTGCTGTTGAAACTGGGGCAGCCCCAGCAAATGGTTCGTTTCCATATAGTCCTTTGCCGTATGTGCCGGGAAATGGTTATGGAAATCATTCATTTGACGGTGTTACATATGTTCCGACTAATGCTGCCTATTTTAATGGGAATGGGGTCACAGGATACCATTCTGGACACGGTTACGATTATGTTTCAAATGTTTCATTTCAGCTGGGCTCTGCTGGACTTATCCATCAAAATGGATCGGCGACTACCTTACCTGCTGATTGTGTTTATCGGGTCAATGGAAATGCGAAGAGGGGAAGACCGAAGGTCAAATCAGGAGCCAATGGAAGGCCTCCAATGGCTGAGACTGTCGTCAATATAAACTCACATGTATTGTTCTCCTGTAATAAACCACAGGAAGTTATGCCAGATAGACCTTACAAGAAACGCAAAGTTACGGTGGGAGCTAGTTTCAGAAATGGTTATGATGCAAAAGGGTCAAAATGTGCTTTAGAAGCAGTAGTGTCGAAAGGAAATGACAACATTGGAATGGGCCAGAAGGTTGTCGTCAAAAATGAAGTTCAAACCAAACACTGTTTCATGCCACCTGCATTTGATGCGAGAAAATTATTGATCGAGAAGGCCAGGACAGTTATTAGGAAGAAACTGGAAGAGATAAAGTTATCATCTGAAGCTGCAACTCTGAAAGAGAAAGAAAAGGCACAAGTTGATGTGTGTCAAGTCAAAAGGGAGACATGTAGGAAAGCATCTTTGAATGTTCCAGGTCTTCAATTGGAGCCACACGGGAAAGCTGGTCCGATCTCAATAACTGTCCCAGATTCTGACTTTCACGACTTCGATAAAGATAGGACAGAGGAATGTTTCAAGCCAAAGCAAATATGGGCCTTATATGATGAAGAAGACGGAATGCCGCGATTGTATTGTCTGATCCGTGAGGTTATATCTGCTAATCCATTTAAGATTCATATCAGTTACCTGAGTTCCAAAACAGATAGCGAATTTGGCTCAGTAAACTGGCTTGAATCAGGTTTTACCAAATCTTGCGGAAATTTCAGGGCTTGGACTTCAGATATTGTTGACCAAGTTAACGTATTTTCCCATGTCCTTGGCCGCGAGAAAGCTGGTCGAGGTGGTTGTGTTCGCATTTATCCGAGAAGTGGAGATATTTGGGCTGTTTATCGAAACTGGTCACCTGATTGGAACCAATCTACACCTGACAATGTAAGGCATGAATATGACATGGTGGAGGTGTTGTATGATTACTCTGAGGACCTTGGTGTATGTGTTACTCCCCTTATTAAGTTATCTGGATTCAAAACAGTATACAAAAGGAATCCAGACCAAGGTGCCGAAAAATGGATACCAAGAAGAGAAATGGTACGCTTTTCGCATCAAGTTCCGTCTTGGTTGCTAAACGGGGAGGAAGCTAATTTGCCCGATCGGTGTTTTGACCTTGATCCGGCTGCAACTCCGGACGGTCTTCTTCATACAGCTGCTGCTACAGAAGCAAAGGCTTTGTAG\n" +
                            ">example2\n" +
                            "ATGGCCACCATAACCACCAACGCTAACACCGTCGCAAAAGCCGTAGACTCTCTTCTCAAATGGCGCAAATCACGTTTAGAAACCAAAAAACCAAAACTCTTCGACGAAGATGAAGAATTCGTTTACCTCATCTTAACCCTAAAGAAAATCCCATCAAAAGGCCGCGTTAACCCTTACAAAATCCCAATTTGTCACTCTCTCATCTCCGCAGCATCGGAACAGTGTCTCATCATCGATGATAGAGCTAACAAACCCTCTCGTATCACCAAAGACGAAGCTCAGAAGAAAGTTCAATCGGAATCGATTCCTATTTCGAAGATTCTTAAGCTTTAG"
                }
                $(`#${blast}QueryText`).val(example);
            }

            function change(element, t) {
                if (element == "text") {
                    $(".fileinput-remove-button").click();
                    $("#" + t + "QueryContent").show();
                    $("#" + t + "QueryFile").hide()
                } else {
                    $(".blast-text").val("");
                    $("#" + t + "QueryContent").hide();
                    $("#" + t + "QueryFile").show()
                }
            }

            let index ;
            let excel ;

            function Run(blast) {
                let form = $(`#${blast}Form`);
                form.formValidation("revalidateField", "queryText");
                form.formValidation("revalidateField", "file");
                let fv = form.data("formValidation");
                fv.validate();
                if (fv.isValid()) {
                    let form1 = new FormData(form[0]);

                    index = MyTable.prototype.runningIcon();

                    $.ajax({
                        url: "@routes.BlastController.blastRun()",
                        type: "post",
                        processData: false,
                        contentType: false,
                        data: form1,
                        success: function (data) {
                            if (data.valid == "false") {
                                swal("Error", data.message, "error");
                                layer.close(index);
                                $("#result").hide()
                            } else {
                                $("#frame").attr("src", "/alfalfa/blast/blastResultBefore?path=" + data.html + "&types=" +
                                        data.types);
                                excel = data.excel;
                            }
                        }
                    });
                }
            }

            window.addEventListener('message', function (e) {
                if (e.data === "success") {
                    layer.close(index);
                    SlideFrameShow("#result")
                }
            }, false);

            function SlideFrameShow(id) {
                $(id).show();
                //   let frame = $("#frame")
                //必须父页面渲染完才可以获取子页面的高度，给iframe框重新赋值
                /*                let height = frame[0].contentWindow.getHeight() + 50;
                                frame.css("height", height)*/
                let target_top = $(id).offset().top ;
                $("html,body").animate({scrollTop: target_top}, 800);
            }

            function downloadExcel() {
                var fileName = "blast.xls";
                var content = excel;
                var blob = new Blob([content], {
                    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
                });
                saveAs(blob, fileName)
            }

            function formValidation() {
                let queryText = {
                    validators: {
                        notEmpty: {
                            message: 'This is not be empty!'
                        }
                    }
                }
                let file = {
                    validators: {
                        notEmpty: {
                            message: 'File is required！'
                        },
                        file: {
                            extension: 'fa,fasta',
                            message: 'Query file must is a fasta file！'
                        }
                    }
                };
                let evalue = {
                    validators: {
                        notEmpty: {
                            message: 'Evalue is required！'
                        },
                        numeric: {
                            message: 'Evalue must be number！'
                        },
                        greaterThan: {
                            value: 0,
                            message: "Evalue must greater than or equal to 0！"
                        }
                    }
                }
                let wordSize = {
                    validators: {
                        notEmpty: {
                            message: 'Word size is required！'
                        },
                        integer: {
                            message: 'Word size must be intger！'
                        },
                        greaterThan: {
                            value: 4,
                            message: "Word size must greater than or equal to 4！"
                        }
                    }
                }
                let maxTargetSeqs = {
                    validators: {
                        notEmpty: {
                            message: 'Max target seqs is required！'
                        },
                        integer: {
                            message: 'Max target seqs must be integer！'
                        },
                        greaterThan: {
                            value: 0,
                            message: "Max target seqs must greater than or equal to 0！"
                        }
                    }
                }

                let percIdentity = {
                    validators: {
                        notEmpty: {
                            message: 'Max target seqs is required！'
                        },
                        integer: {
                            message: 'Max target seqs must be integer！'
                        },
                        between: {
                            min: 0,
                            max: 100,
                            inclusive: true,
                            message: "Perc Identity must between 0 and 100！"
                        }
                    }
                }

                let db = {
                    validators: {
                        notEmpty: {
                            message: "Database is required！"
                        }
                    }
                }

                $('#blastnForm').formValidation({
                    framework: 'bootstrap',
                    icon: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        queryText: queryText,
                        file: file,
                        'db[]': db,
                        evalue: evalue,
                        wordSize: wordSize,
                        maxTargetSeqs: maxTargetSeqs,
                        percIdentity:percIdentity
                    }
                });

                $('#blastnGenomeForm').formValidation({
                    framework: 'bootstrap',
                    icon: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        queryText: queryText,
                        file: file,
                        'db[]': db,
                        evalue: evalue,
                        wordSize: wordSize,
                        maxTargetSeqs: maxTargetSeqs,
                        percIdentity:percIdentity
                    }
                });

                $('#blastpForm').formValidation({
                    framework: 'bootstrap',
                    icon: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        queryText: queryText,
                        file: file,
                        'db[]': db,
                        evalue: evalue,
                        wordSize: {
                            validators: {
                                notEmpty: {
                                    message: 'Word size is required！'
                                },
                                integer: {
                                    message: 'Word size must be intger！'
                                },
                                between: {
                                    min: 0,
                                    max: 8,
                                    inclusive: false,
                                    message: "Word size must less than  8！"
                                }
                            }
                        },
                        maxTargetSeqs: maxTargetSeqs,
                        percIdentity:percIdentity
                    }
                });
            }


            function selectAll(blast) {
                const form = `${blast}Form`
                $(`#${form} .db`).prop("checked", true);
                $(`#${form}`).formValidation("revalidateField", "db[]")
            }

            function inverse(blast) {
                const form = `${blast}Form`
                $(`#${form} .db`).prop("checked", false);
                $(`#${form}`).formValidation("revalidateField", "db[]")
            }


    </script>

}

@BlastForm(blast: String, h4: String) = {
    <form class="form-horizontal col-sm-12 my-form" method="get" id="@{
        blast
    }Form">

        <h5>@h4</h5>

        <input name="blastType" value="@blast" style="display: none;" />

        <div class="col-sm-12 form-group my-position">
            <label class="col-sm-3 my-position-title">Type of query:</label>
            <div class="col-sm-8" style="text-align: left;
                display: flex">

                <div class="form-check">
                    <label class="form-check-label">
                        <input type='radio' name='method' value='text' checked onclick="change('text', '@blast')" >
                        Text<i class="input-helper"></i>
                    </label>
                </div>

                <div class="form-check">
                    <label class="form-check-label">
                        <input type='radio' name='method' value='file' onclick="change('file', '@blast')" >
                        File<i class="input-helper"></i>
                    </label>
                </div>

            </div>
        </div>

        <div class="col-sm-12 form-group my-position" id="@{
            blast
        }QueryContent">
            <label class="col-sm-3 my-position-title"> Enter FASTA sequences  :</label>
            <div class="col-sm-8">
                <textarea class="form-control monospace" type="text" rows="5" name="queryText" id="@{
                    blast
                }QueryText"></textarea>
                <span>
                    e.g.,&nbsp;<a href="javascript:getExample('@blast');" ><em class="egCrics">example</em></a></span>
            </div>
        </div>

        <div class="col-md-12  form-group my-position" id="@{
            blast
        }QueryFile" style="display: none">
            <label class="col-sm-3 my-position-title">upload file:</label>
            <div class="col-sm-6">
                <input id="input-1" type="file" class="file control-label" name="file" data-show-preview="false"
                data-show-upload="false" accept=".fa,.fasta" data-browse-class="btn my-btn">
                <span>
                    e.g.,&nbsp;<a href="/downloadExample?name=@blast"><em class="egCrics">
                    example_file</em></a></span>
            </div>
        </div>

        <div class="col-md-12  form-group my-position">
            <label class="col-sm-3 my-position-title">Database:</label>
            <div class="col-sm-8">
                <div>
                    @checkbox("XJDY")
                    @checkbox("ZMNO")
                    @checkbox("MSAE")
                    @checkbox("MTRU")
                    @checkbox("ZM-4")
                </div>
                <input type="checkbox" name="db[]" style="display: none" />

                <div style="width: 180px;
                    padding-top: 10px">
                    <input type="button" value="Select All" class="btn my-btn" onclick="selectAll('@blast')" />
                    <input type="button" value="Inverse" class="btn my-btn" onclick="inverse('@blast')"/>
                </div>
            </div>
        </div>


        <div class="col-sm-12 form-group my-position">
            <label class="col-sm-3 my-position-title">Evalue:</label>
            <div class="col-sm-2" style="text-align: left">
                <input class="form-control" name="evalue" value="1e-5">
            </div>

            <label class="col-sm-3 my-position-title">Word size:</label>
            <div class="col-sm-2" style="text-align: left">
                <input class="form-control" name="wordSize" value="@if(blast == "blastp") {3} else {28}">
            </div>
        </div>

        <div class="col-sm-12 form-group my-position">
            <label class="col-sm-3 my-position-title">Max target seqs:</label>
            <div class="col-sm-2" style="text-align: left">
                <input class="form-control" name="maxTargetSeqs" value="10">
            </div>

            @if(blast != "blastp"){

            <label class="col-sm-3 my-position-title">Percent identity:</label>
            <div class="col-sm-2" style="text-align: left">
                <input class="form-control" name="percIdentity" value="90">
            </div>
            }else{
                <input class="form-control" name="percIdentity" value="90" style="display: none">
            }

        </div>

        <hr>
        <div class="col-md-12 form-group">
            <label class="col-sm-3"></label>
            <button type="button" class="btn my-btn" style="width: 200px" onclick="Run('@blast')">Search</button>
        </div>
    </form>
}

@checkbox(db: String) = {
    <div class="form-check">
        <label class="form-check-label">

            <input type='checkbox' name='db[]' value='@db' class="db"> <i class="input-helper"></i> @{db match {
            case "XJDY" => Html("<i>M. sativa </i>cultivar XinJiangDaYe")
            case "ZMNO" => Html("<i>M. sativa </i>cultivar Zhongmu No. 1")
            case "MSAE" => Html("<i>M. sativa spp. caerulea </i>")
            case "MTRU" => Html("<i>M. truncatula </i>")
            case "ZM-4" => Html("<i>M. sativa </i>cultivar Zhongmu No. 4")
        }}
        </label>
    </div>
}